<template>
  <a-form :form="form">
    <div v-for="(item, index) in employ.empEducationList" :key="item.guid || item.id">
      <a-col :span="10">
        <!-- 学历 -->
        <a-form-item label="学历" :label-col="{ span: 9 }" :wrapper-col="{ span: 15 }">
          <span class="text_color" v-if="disable">{{ item.education }}</span>
          <a-select
            v-decorator="[`education-${index}`, { initialValue: item.education }]"
            v-else
            @change="change1($event, index, 'education')"
          >
            <a-select-option :value="1">小学</a-select-option>
            <a-select-option :value="2">初中</a-select-option>
            <a-select-option :value="3">中专</a-select-option>
            <a-select-option :value="4">高中</a-select-option>
            <a-select-option :value="5">大专</a-select-option>
            <a-select-option :value="6">本科</a-select-option>
            <a-select-option :value="7">硕士</a-select-option>
            <a-select-option :value="8">博士</a-select-option>
            <a-select-option :value="9">其他</a-select-option>
          </a-select>
        </a-form-item>
      </a-col>
      <a-col :span="10">
        <a-form-item label="毕业院校" :label-col="{ span: 9 }" :wrapper-col="{ span: 15 }">
          <span class="text_color" v-if="disable">{{ item.graCollege }}</span>
          <a-input
            v-decorator="[`graCollege-${index}`, { initialValue: item.graCollege }]"
            v-else
            @change="change($event, index, 'graCollege')"
          />
        </a-form-item>
      </a-col>
      <a-col :span="10">
        <a-form-item label="毕业专业" :label-col="{ span: 9 }" :wrapper-col="{ span: 15 }">
          <span class="text_color" v-if="disable">{{ item.major }}</span>
          <a-input v-decorator="[`major-${index}`, { initialValue: item.major }]" v-else @change="change($event, index, 'major')" />
        </a-form-item>
      </a-col>
      <a-col :span="10">
        <a-form-item label="教育开始时间" :label-col="{ span: 9 }" :wrapper-col="{ span: 15 }">
          <span class="text_color" v-if="disable">{{ item.startTime }}</span>
          <a-date-picker
            v-decorator="[`startTime-${index}`, { initialValue: getMoment(item.startTime) }]"
            placeholder="选择日期"
            style="width:100%"
            v-else
            @change="change2($event, index, 'startTime')"
          />
        </a-form-item>
      </a-col>
      <a-col :span="10">
        <a-form-item label="教育结束时间" :label-col="{ span: 9 }" :wrapper-col="{ span: 15 }">
          <span class="text_color" v-if="disable">{{ item.endTime }}</span>
          <a-date-picker
            v-decorator="[`endTime-${index}`, { initialValue: getMoment(item.endTime) }]"
            placeholder="选择日期"
            style="width:100%"
            v-else
            @change="change2($event, index, 'endTime')"
          />
        </a-form-item>
      </a-col>

      <a-col :span="10">
        <a-form-item label="学习形式" :label-col="{ span: 9 }" :wrapper-col="{ span: 15 }">
          <span class="text_color" v-if="disable">{{ item.teaMethods }}</span>
          <a-select
            v-decorator="[`teaMethods-${index}`, { initialValue: item.teaMethods }]"
            v-else
            @change="change1($event, index, 'teaMethods')"
          >
            <a-select-option value="1">全日制</a-select-option>
            <a-select-option value="2">成人教育</a-select-option>
            <a-select-option value="3">远程教育</a-select-option>
            <a-select-option value="4">自学考试</a-select-option>
            <a-select-option value="5">其他非全日制</a-select-option>
          </a-select>
        </a-form-item>
      </a-col>
      <a-col :span="10">
        <a-form-item label="毕业证书编号" :label-col="{ span: 9 }" :wrapper-col="{ span: 15 }">
          <span class="text_color" v-if="disable">{{ item.graCerNumber }}</span>
          <a-input
            v-decorator="[`graCerNumber-${index}`, { initialValue: item.graCerNumber }]"
            v-else
            @change="change($event, index, 'graCerNumber')"
          />
        </a-form-item>
      </a-col>
      <a-col :span="10">
        <a-form-item label="学位类型" :label-col="{ span: 9 }" :wrapper-col="{ span: 15 }">
          <span class="text_color" v-if="disable">{{ item.degreeType }}</span>
          <a-select
            v-decorator="[`degreeType-${index}`, { initialValue: item.degreeType }]"
            v-else
            @change="change1($event, index, 'degreeType')"
          >
            <a-select-option :value="1">学士</a-select-option>
            <a-select-option :value="2">硕士</a-select-option>
            <a-select-option :value="3">博士</a-select-option>
            <a-select-option :value="4">未获得学位</a-select-option>
          </a-select>
        </a-form-item>
      </a-col>
      <a-col :span="10">
        <a-form-item label="学位名称" :label-col="{ span: 9 }" :wrapper-col="{ span: 15 }">
          <span class="text_color" v-if="disable">{{ item.degreeName }}</span>
          <a-input
            v-decorator="[`degreeName-${index}`, { initialValue: item.degreeName }]"
            v-else
            @change="change($event, index, 'degreeName')"
          />
        </a-form-item>
      </a-col>
      <a-col :span="10">
        <a-form-item label="学位证书编号" :label-col="{ span: 9 }" :wrapper-col="{ span: 15 }">
          <span class="text_color" v-if="disable">{{ item.degreeNumber }}</span>
          <a-input
            v-decorator="[`degreeNumber-${index}`, { initialValue: item.degreeNumber }]"
            v-else
            @change="change($event, index, 'degreeNumber')"
          />
        </a-form-item>
      </a-col>
      <a-col :span="17">
        <a-form-item label="教育备注" :label-col="{ span: 3 }" :wrapper-col="{ span: 21 }">
          <span class="text_color" v-if="disable">{{ item.educationRemark }}</span>
          <a-textarea
            v-decorator="[`educationRemark-${index}`, { initialValue: item.educationRemark }]"
            v-else
            @change="change($event, index, 'educationRemark')"
          />
        </a-form-item>
      </a-col>
      <a-col :span="10">
        <a-form-item :label-col="{ span: 9 }" :wrapper-col="{ span: 15 }">
          <a-input v-decorator="[`id-${index}`, { initialValue: String(item.id) }]" type="hidden" />
        </a-form-item>
      </a-col>
      <a-col v-if="!disable" :span="17" class="mb24">
        <a-button type="dashed" style="width:100%;height:44px;" @click="delEdu(index)">删除</a-button>
      </a-col>
      <a-col v-if="index != employ.empEducationList.length - 1" :span="17" class="border-top mb12" />
    </div>
    <div v-if="!disable">
      <a-col :span="17" class="border-top" />
      <a-col :span="17" class="mt24 mb24">
        <a-button type="dashed" style="width:100%;height:44px;" @click="addEdu">
          新增
        </a-button>
      </a-col>
      <a-col :span="23">
        <div class="basicInfo-button-group">
          <a-button class="mr12" @click="cancel">取消</a-button>
          <a-button type="primary" @click="editEducationBtn">确认</a-button>
        </div>
      </a-col>
    </div>
  </a-form>
</template>
<script>
import { updateEmpAllInfo } from "@/api/staff/staff";
export default {
  name: "EducationForm",
  props: {
    employ: {
      type: Object
    },
    disable: {}
  },
  data() {
    return {
      // dateFormat: 'YYYY-MM-DD',
      form: this.$form.createForm(this),
      typeOptions: [{ value: "全日制" }, { value: "成人教育" }, { value: "远程教育" }, { value: "自学考试" }, { value: "其他非全日制" }],
      typeOptions1: [
        { id: 0, value: "学士学位" },
        { id: 1, value: "硕士学位" },
        { id: 2, value: "博士学位" },
        { id: 3, value: "未获得学位" }
      ]
      // ,
      // isFirstEdu: [{ label: '否', value: 'false' }, { label: '是', value: 'true' }]
    };
  },
  watch: {
    employ() {
      if (this.employ.empEducationList == null || this.employ.empEducationList.length === 0) {
        this.$set(this.employ, "empEducationList", [{}]);
      }
    }
  },
  methods: {
    change(e, index, key) {},
    change1(e, index, key) {},
    change2(e, index, key) {},

    cancel() {
      this.$emit("cancelEdit");
      if (!this.employ.empEducationList || this.employ.empEducationList.length === 0) {
        this.employ.empEducationList.push({ guid: Math.random() * 16 });
      }
    },
    addEdu() {
      if (this.employ.empEducationList === null) {
        this.employ.empEducationList = [];
      }

      this.employ.empEducationList.push({ guid: Math.random() * 16 });
    },
    delEdu(index) {
      this.employ.empEducationList.splice(index, 1);
    },
    getMoment(date) {
      return date ? this.moment(date) : null;
    },
    editEducationBtn() {
      var that = this;
      this.form.validateFields((err, values) => {
        if (!err) {
          const value = this.beautyData(values);

          setTimeout(() => {
            updateEmpAllInfo({
              id: this.employ.id,
              phone: this.employ.phone,
              empEducationList: value
            }).then(res => {
              that.$notification["success"]({
                message: "success",
                description: "编辑成功"
              });

              that.$emit("cancelEdit");
            });
          }, 300);
        }
      });
    },
    beautyData(data) {
      var arr = [];
      this.employ.empEducationList.forEach((item, index) => {
        arr[index] = {
          graCollege: data[`graCollege-${index}`],
          major: data[`major-${index}`],
          teaMethods: data[`teaMethods-${index}`],
          graCerNumber: data[`graCerNumber-${index}`],
          degreeType: data[`degreeType-${index}`],
          degreeName: data[`degreeName-${index}`],
          degreeNumber: data[`degreeNumber-${index}`],
          educationRemark: data[`educationRemark-${index}`],
          education: data[`education-${index}`],
          startTime: this.getMoment(data[`startTime-${index}`]),
          endTime: this.getMoment(data[`endTime-${index}`]),
          //  "isFirstEdu": data[`isFirstEdu-${index}`],
          id: data[`id-${index}`]
        };
      });
      return arr;
    }
  }
};
</script>

<style scoped>
.basicInfo-button-group {
  text-align: center;
  padding-bottom: 24px;
}
</style>
